<template>
  <el-dialog
  class="small-dialog"
      width="600px"
    v-if="innerVisible"
    :title="title"
    :visible.sync="innerVisible"
    append-to-body
    @close="closeCode"
  >
    <div class="paycode">
      <div id="qrcode" ref="qrcode" />
    </div>
  </el-dialog>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      title: '',
      innerVisible: false
    }
  },
  methods: {
    createCode(url, title) {
      this.title = title
      this.innerVisible = true
      this.qrcode = url
      this.$nextTick(() => {
        this.crateQrcode()
      })
    },
    // 生成二维码
    crateQrcode() {
      this.qr = new QRCode('qrcode', {
        width: 300,
        height: 300, // 高度
        text: this.qrcode, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f',
        foreground: '#ff0'
      })
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.$refs.qrcode.innerHTML = ''
    }
  }
}
</script>
<style>

</style>

